<script setup>
import {reactive, ref} from "vue";
import axios from "axios";
import xx from "@/axios/xx";
import {ElMessage} from "element-plus";
import {Delete, Download, Edit, Plus, Search, Upload} from "@element-plus/icons-vue";



//定义的各种数据
let info = reactive({
  list:[],//列表数据
  form:{},//表单数据
  dialogVisible:false,//对话框数据
  pageNum: 1, //当前页
  pageSize: 5, //每页大小
  total: 0,//总条数
  isAdd: true, //增加和修改标识

})


// 快速搜索的函数
const quickSearch = () => {
  load(); // 调用加载数据函数
};

//查询列表信息
const load = () => {
  xx.get("/loanType", {
    params: {
      pageNum: info.pageNum,
      pageSize: info.pageSize,
      deadline: info.form.deadline,// 贷款期限
      money: info.form.money,// 贷款金额
      loanTypeName: info.form.loanTypeName,// 贷款类型名称
    }
  }).then(res => {
    console.log(res); // 打印返回的数据
    // 更新响应式数据
    info.list = res.data.list;
    info.pageNum = res.data.pageNum;
    info.pageSize = res.data.pageSize;
    info.total = res.data.total;
  });
};

load(); // 页面加载时即调用加载函数

//分页当前页改变
const handleCurrentChange = (pageNum) => {
  info.pageNum = pageNum;
  load()
}
//分页大小改变
const handleSizeChange = (pageSize) => {
  info.pageSize = pageSize;
  load()
}
//持久化数据
const persistence = () => {
  xx({
    url:'/loanType',
    method:info.isAdd?'post':'put',
    data:info.form
  }).then(res => {
    if (res.code === 200) {
      ElMessage({
        message: res.messagae,
        type: 'success',
      })
    } else {
      ElMessage.error(res.messagae)
    }
    //关闭对话框
    info.dialogVisible = false
    info.form = {} //情况数据
    load()
  })
}
//关闭对话框，清空数据
const handleClose = () => {
  info.form = {}
  info.dialogVisible = false
}
const exportExcel = () => {
  xx({
    method:"get",
    url:"/loanType/exportExcel",
    params:{
      pageNum:info.pageNum,
      pageSize:info.pageSize,
      loanTypeName:info.form.loanTypeName,
      money:info.form.money,
      deadline:info.form.deadline,
    },
    responseType:"blob" //定义为bolb
  }).then(res =>{
    let blob = new Blob([res])
    let downloadElement = document.createElement('a')
    let href = window.URL.createObjectURL(blob) // 创建下载的链接
    downloadElement.href = href
    downloadElement.download = '贷款产品信息数据.xlsx' // 下载后文件名
    document.body.appendChild(downloadElement)
    downloadElement.click() // 点击下载
    document.body.removeChild(downloadElement) // 下载完成移除元素
    window.URL.revokeObjectURL(href) // 释放掉blob对象

  })
}
// 申请贷款的函数
const applyForLoan = (loanTypeId) => {
  xx.get("/loanType/"+loanTypeId).then(res => {
    console.log(res);
    info.form = res.data;
    info.list =res.data.list;
  })
  info.dialogVisible = true; // 打开申请贷款对话框
  info.form={}
  load();
};

// 处理贷款申请的函数
const applyLoan = () => {
  xx.post("/loanApplication", {
    username: info.form.UserName,
    password: info.form.PassWord,
    date: info.form.StartDate,
    loanTypeId: info.form.loanTypeId
  }).then(res => {
    if (res.code === 200) {
      ElMessage({
        message: res.message,
        type: 'success',
      })

      info.dialogVisible = false;
      info.form = {};
      load();
    } else {
      ElMessage.error(res.message)

      info.dialogVisible = false
      // 清空数据
      info.form = {}
      load();
    }
  })
};


</script>

<template>
  <div class="productType">
    <!--导出按钮-->
    <el-button type="danger" @click="exportExcel"><el-icon class="el-icon--left" ><Download /></el-icon>导出数据</el-button>
    <br>
    <br>
    <!--快捷查询-->
    <el-form :inline="true" :model="info.form" class="demo-form-inline">
      <el-form-item label="贷款产品类型：">
        <el-input v-model="info.form.loanTypeName"  placeholder="模糊查询" clearable >
        </el-input>
      </el-form-item>
      <el-form-item label="期限：">
        <el-input v-model="info.form.deadline" placeholder="请输入期限" clearable />
      </el-form-item>
      <el-form-item label="金额：">
        <el-input v-model="info.form.money" placeholder="请输入金额" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="quickSearch" :icon="Search">查询</el-button>
      </el-form-item>
    </el-form>
    <!--表格信息-->
    <el-table :data="info.list" border stripe style="width: 100%">
      <el-table-column type="index" align="center" label="序号" width="150" />
      <el-table-column prop="loanTypeName" align="center" label="贷款产品类型" width="200" />
      <el-table-column prop="bank.bankName" align="center" label="银行名称" width="200" />
      <el-table-column prop="description" align="center" label="描述信息" />
      <el-table-column prop="money" align="center" label="贷款金额(¥)" width="200" />
      <el-table-column prop="deadline" align="center" label="贷款期限(月)" width="180" />
      <el-table-column align="center" label="操作" width="120">
        <template #default="scope">
          <el-button type="primary" size="small" @click="applyForLoan(scope.row.loanTypeId)">申请</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <br>
    <div class="demonstration"></div>
    <el-pagination
        v-model:current-page="info.pageNum"
        v-model:page-size="info.pageSize"
        :page-sizes="[5, 10, 15, 20]"
        :small="false"
        :disabled="false"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="info.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>

  <!-- 贷款申请对话框 -->
  <el-dialog
      v-model="info.dialogVisible"
      title="申请贷款"
      width="50%"
  >
    <el-form :model="info.list" label-width="120px" style="max-width: 90%; margin-left: 20px">
      <el-form-item label="贷款类型">
        <el-input v-model="info.form.loanTypeName" disabled></el-input>
      </el-form-item>
      <el-form-item label="银行">
        <el-input v-model="info.form.bankId" disabled></el-input>
      </el-form-item>
      <el-form-item label="金额(￥)">
        <el-input v-model="info.form.money" disabled></el-input>
      </el-form-item>
      <el-form-item label="期限(月)">
        <el-input v-model="info.form.deadline" disabled></el-input>
      </el-form-item>
      <el-form-item label="用户账号">
        <el-input v-model="info.form.UserName"  />
      </el-form-item>
      <el-form-item label="用户密码">
        <el-input v-model="info.form.PassWord" type="password" />
      </el-form-item>
      <el-form-item label="选择贷款日期">
        <el-date-picker
            v-model="info.form.StartDate"
            type="date"
            placeholder="选择时间"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="applyLoan">申请贷款</el-button>
      </div>
    </template>
  </el-dialog>

</template>

<style scoped>

/* 分页组件居中显示 */
#pagination{
  justify-content: center;
}
.el-form-item{
  margin-left: 40px; /* 表单项左边距样式 */
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
  border: 1px solid #666;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

</style>